<template>
  <main class="screen-bg">
    <div class="header"></div>

    <div class="center-container">
      <div class="container-left">
        <div class="left-top">
          <pie-charts :echartDatas="chargingPile"></pie-charts>
        </div>
        <div class="left-bottom">2</div>
      </div>

      <div class="container-center">
        <div class="center-top"></div>
        <div class="center-bottom"></div>
      </div>

      <div class="container-right">
        <div class="right-top">3</div>
        <div class="right-center">4</div>
        <div class="right-bottom">5</div>
      </div>
    </div>
  </main>
</template>

<script setup>
import PieCharts from '@/components/pie-echarts.vue'
import { data } from '../mock/mock.js'
import { onMounted, ref } from 'vue'
// 充电桩饱和比例
let chargingPile = ref()
onMounted(() => {
  setTimeout(() => {
    chargingPile.value = data.list
  }, 1000)
})
</script>

<style scoped>
.screen-bg {
  /* 定位 */
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* 背景 */
  background-color: #070a3c;
  background-image: url(@/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.header {
  height: 56px;

  /* 背景 */
  background-image: url(@/assets/images/bg_header.svg);
  background-repeat: no-repeat;
}
.center-container {
  flex: 1;
  display: flex;
}
.container-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 536px;
}
.left-top {
  height: 50%;
  background-image: url(@/assets/images/bg_left-top.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}
.left-bottom {
  height: 50%;
  background-image: url(@/assets/images/bg_left_bottom.svg);
  background-repeat: no-repeat;
}

.container-center {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 823px;
  height: 100vh;
}
.center-top {
  height: 610px;
}
.center-bottom {
  background-image: url(../assets/images/bg_bottom.svg);
  background-repeat: no-repeat;
  height: 209px;
  background-size: 100%;
}
.container-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: auto;
}

.right-top {
  flex: 1;
  height: 327px;
  background-image: url(../assets/images/bg_right_top.svg);
  background-repeat: no-repeat;
}
.right-center {
  flex: 1;
  height: 327px;

  background-image: url(../assets/images/bg_right_center.svg);
  background-repeat: no-repeat;
}
.right-bottom {
  flex: 1;
  height: 242px;
  background-image: url(../assets/images/bg_right_bottom.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}
/*  
.center {
  position: absolute;
  right: 540px;
  bottom: 272px;
  width: 823px;
  height: 710px;
}
.bottom {
  position: absolute;
  right: 540px;
  bottom: 49px;
  width: 823px;
  height: 209px;
  background-image: url(../assets/images/bg_bottom.svg);
  background-repeat: no-repeat;
} */
</style>
